<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link th:href="@{vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet">-->
<!--    <link th:href="@{vendor/bootstrap-icons/bootstrap-icons.css}" rel="stylesheet">-->
    <script th:src="@{vendor/purecounter/purecounter.js}"></script>
    <script th:src="@{vendor/aos/aos.js}"></script>
    <script th:src="@{vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{vendor/bootstrap/js/bootstrap.js}"></script>
    <script th:src="@{vendor/glightbox/js/glightbox.min.js}"></script>
    <script th:src="@{vendor/isotope-layout/isotope.pkgd.min.js}"></script>
<!--    <script th:src="@{vendor/swiper/swiper-bundle.min.js}"></script>-->
    <script th:src="@{vendor/php-email-form/validate.js}"></script>
    <script th:src="@{vendor/jq/jquery-3.4.1.js}"></script>
    <style>
        .demoContainer, .solution , .effect{
            display: flex;
            background-color: #f3f5f6;
            flex-direction: column;
            align-items: center;
        }
        .demoContainer h1 ,.solution h1,.pain h1,.effect h1 {
            font-size: 35px;
            font-weight: bold;
            text-transform: uppercase;
            position: relative;
            color: #3a3939;
            border-bottom-style: solid;
            border-bottom-color: #5ea8f1;
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
            border-bottom-width: 5px;
        }
        .back{
            display: flex;
            flex-direction: row;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            background-color: #fff;
            width: 70%;
            height: 500px;
            margin: 15px;//item之间相距距离
        }
        .back img{
            object-fit: cover;
            margin: 2%;
            width: 50%;
        }
        .back li{
            color:#666666;
            font-size: 1vw;
            margin-top: 2%;
            margin-right: 2%;
        }
        .back li::marker{
            color: rgba(72, 135, 231, 0.7);
        }
        .back h2{
            left: 5%; /* 从左侧开始，向右偏移50% */
            margin-top: 5%;
            font-size: 30px;
            font-weight: bold;
            bottom: 1px;
        }
        .pain{
            display: flex;
            background-color: #f3f5f6;
            flex-direction: column;
            align-items: center;
        }
        .pain ul{
            list-style-type: none;
            width: 80%;
            background-color: #fff3cd;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .pain li{
            text-align: center;
            margin: 1% 1% 1% 0%;
            width: 31.8%;
            padding-left: 1%;
            padding-right: 1%;
            background-color: #fff;
            color: #666666;
        }
        .pain li:hover img{
            width: 50%;
            height: auto;
            transition: 0.3s;
        }
        .pain li img{
            width: 32.8%;
            background-color: #fff;
        }
        .solution ul{
            list-style-type: none;
            width: 80%;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .solution li{
            border-radius: 50%;
            text-align: center;
            overflow: hidden;
            margin: 1% 1% 1% 0%;
            width: 20.8%;
            padding-left: 3%;
            padding-right: 3%;
            background-color: #fff;
            color: #666666;
        }
        .solution li:hover {
            box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            transition: 0.3s;
        }
        .solution li img{
            width: 32.8%;
            background-color: #fff;
        }
    </style>
</head>
<body>
<div class="demoContainer">
    <h1>锂电池生产</h1>
    <div class="back">
        <img th:src="@{img/func/NMES-1.jpg}"  alt="...">
        <div>
            <h2>行业背景</h2>
            <ul>
                <li>锂电池生产——工艺路线长、测试数据量大、生产周期长，涉及粉料、液体等按配比使用消耗的物料，针对电池生产化工与组装行业结合、
                    产品质量要求高，流程投料需要严格把控特点， 需要实现产品全过程追溯、产品测试数据采集、设备集成、质量监控等功能。
                </li>
                <li>市场趋向于定制化与小批量多品种生产，客户要求不断提高。产品更新迭代快，要求生产周期/产品交货期短。</li>
                <li>电池生产半成品产物对于存储条件、使用时限有着严格要求，传统电子加工企业还是通过仓储区域隔离、纸质记录、看板卡片等手段进行管控，存在生产流程漏洞。</li>
            </ul>
        </div>
    </div>
</div>
<div class="pain">
    <h1>生产痛点分析</h1>
    <ul>
        <li>
            <img th:src="@{img/icon/品质.png}"  alt="...">
            <p>锂电池产品物物料精小、多且杂，导致经常错料，出入库无批次管理难追溯。</p>
        </li>
        <li>
            <img th:src="@{img/icon/数据.png}"  alt="...">
            <p>设备利用率低，设备性能无法及时分析，现场生产浪费无法及时发现。</p>
        </li>
        <li>
            <img th:src="@{img/icon/调查日记.png}"  alt="...">
            <p>原料库存多，在制品积压，产线WIP呆滞，对生产需求的响应严重滞后。</p>
        </li>
        <li>
            <img th:src="@{img/icon/品质.png}"  alt="...">
            <p>产品在不同工序间进行相应的工序流程校验时，无法保证物料、设备、工装夹具、相应测试程序等的正确应用。</p>
        </li>
        <li>
            <img th:src="@{img/icon/数据.png}"  alt="...">
            <p>数据采集不及时，沟通数据传递延误，数据展示不够直观，数据资产利用深度不足。</p>
        </li>
        <li>
            <img th:src="@{img/icon/调查日记.png}"  alt="...">
            <p>物料与成品之间无状态配置关系，产品状态信息不详。</p>
        </li>
    </ul>
</div>
<div class="solution">
    <h1>解决方案</h1>
    <ul>
        <li>
            <img th:src="@{img/icon/调查日记.png}"  alt="...">
            <h2>仓储物料管理</h2>
            <p>实现物料批次与储位管理，系统对线边库存实时动态监控，形成物料拉动，对物料使用过程建立有效防错机制。</p>
        </li>
        <li>
            <img th:src="@{img/icon/品质.png}"  alt="...">
            <h2>设备管理</h2>
            <p>通过设备上传数据集成台账，对各类设备进行有效维修保养管理，并对其有效工作状态和工艺参数进行监控统计，有效提升设备利用率，并通过设备和系统集成管控实现设备管理。</p>
        </li>
        <li>
            <img th:src="@{img/icon/调查日记.png}"  alt="...">
            <h2>生产工艺</h2>
            <p>产品生产工艺配方，所经工序投料参数检测标准。流转流程工艺路径可变，生产线能够根据不同产品型号的需求进行灵活调整，以适配生产多样化产品。</p>
        </li>
        <li>
            <img th:src="@{img/icon/数据.png}"  alt="...">
            <h2>生产管理</h2>
            <p>有效连通客户订单生成生产计划，排产计划根据工艺工序配置一键下发，自动配置任务单物料表进行领料生产。追溯生产工单任务进度，设备生产数据集成进行产能分析。</p>
        </li>
        <li>
            <img th:src="@{img/icon/品质.png}"  alt="...">
            <h2>质量管理</h2>
            <p>预防为主，实现自动质检任务确认、质量异常报警、不良处理方式记录等，系统提供完善的产品全制程质量数据。</p>
        </li>
        <li>
            <img th:src="@{img/icon/数据.png}"  alt="...">
            <h2>半成品查询</h2>
            <p>实时监控产线在制品情况，查询半成品所用物料和生成产物。半成品数据快速完成数据交接，缩短交接班时长。</p>
        </li>
        <li>
            <img th:src="@{img/icon/调查日记.png}"  alt="...">
            <h2>产品追溯</h2>
            <p>可根据产品条码查询产品所用物料、经过工序、各个工序测试数据等；物料和生产过程的追溯管理，确保产品的质量和安全性</p>
        </li>
        <li>
            <img th:src="@{img/icon/调查日记.png}"  alt="...">
            <h2>报表看板</h2>
            <p>展示各个工作站设备数量、使用情况；工单总数、工单状态、排产数量、日期、完成情况等及运行状态等</p>
        </li>
    </ul>
</div>
<!--<div class="effect">-->
<!--    <h1>实施效果</h1>-->
<!--</div>-->
</body>
</html>